<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="renderer" content="webkit" />
		<title>质控发布</title>
		<!--[if lt IE 9]>
			<meta http-equiv="refresh" content="0;ie.html" />
		<![endif]-->
		<link href="../css/bootstrap.min.css" rel="stylesheet" />
		<link href="../iconfont/iconfont.css" rel="stylesheet" />
		<link href="../js/layui/css/layui.css" rel="stylesheet" type="text/css">
		<link href="../css/style.css" rel="stylesheet" />
		<link href="../css/cross.css" rel="stylesheet" />
		<link href="../css/change.css" rel="stylesheet" />
	</head>

	<body class="gray-bg body-con">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="table-con mh-con-110">
				<p>选择要发布的质控（多选）</p>
				<ul class="file-con clearfix mt-20">
					<li>
						<a href="javascript:;">
							<p class="file-tit"><i class="check"></i>第一部分</p>
							<img src="../images/file.png" >
							<p class="file-bottom">基础配置与人力配备</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<p class="file-tit"><i class="check"></i>第二部分</p>
							<img src="../images/file.png" >
							<p class="file-bottom">工作制度与工作流程</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<p class="file-tit"><i class="check"></i>第三部分</p>
							<img src="../images/file.png" >
							<p class="file-bottom">诊治能力与质量控制</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<p class="file-tit"><i class="check"></i>第四部分</p>
							<img src="../images/file.png" >
							<p class="file-bottom">健康管理与健康教育</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<p class="file-tit"><i class="check"></i>第五部分</p>
							<img src="../images/file.png" >
							<p class="file-bottom">基础配置与人力配备</p>
						</a>
					</li>
				</ul>
				<div class="select-flex">
					<div class="select-row mt-10">
						<span>评审专家</span>
						<span class="input-select">
							<input type="text" value="" placeholder="请选择评审专家" disabled=""/>
							<i class="iconfont icon-xiangxia"></i>
							<ul class="check-select c-hide">
								<li><i class="check all-sp" id="all1"></i>全选</li>
								<li><i class="check"></i>评审专家1</li>
								<li><i class="check"></i>评审专家2</li>
								<li><i class="check"></i>评审专家3</li>
								<li><i class="check"></i>评审专家4</li>
							</ul>
						</span>
					</div>
					<div class="select-row mt-10">
						<span>医院</span>
						<span class="input-select">
							<input type="text" value="" placeholder="请选择医院" disabled=""/>
							<i class="iconfont icon-xiangxia"></i>
							<ul class="check-select c-hide">
								<li><i class="check all-sp" id="all2"></i>全选</li>
								<li><i class="check"></i>医院1</li>
								<li><i class="check"></i>医院2</li>
								<li><i class="check"></i>医院3</li>
								<li><i class="check"></i>医院4</li>
							</ul>
						</span>
					</div>
				</div>
				<p class="warm-tip">提示：随机分配后，将随机给专家分配机构</p>
				<div class="mt-40 file-btn">
					<a class="btn-bg-blue" href="javascript:;">手动发布质控</a>
					<a class="btn-blue ml-20" href="javascript:;" id="set_time"><i class="iconfont icon-dingshi"></i>设置定时发送</a>
				</div>
				<div class="mt-40 file-btn">
					<a class="btn-bg-blue" href="javascript:;">填写质控评价</a>
				</div>
			</div>
			
			<div class="mask c-hide" id="time">
				<div class="msg-mask w-400">
					<h5>设置定时发送<i class="iconfont icon-guanbi" id="close_time"></i></h5>
					<div class="select-date-time clearfix">
						<span class="input-select select-time">
							<input type="text" value="" placeholder="设置定时发送时间" disabled=""/>
							<i class="iconfont icon-xiangxia"></i>
							<ul class="select-ul c-hide">
								<li class="curr">1 个月</li>
								<li>3 个月</li>
								<li>6 个月</li>
								<li>12 个月</li>
							</ul>
						</span>
					</div>
					<div class="select-date-time del-time clearfix">
						已设置每 1 个月定时发送<i class="iconfont icon-guanbi"></i>
					</div>
					<div class="mask-btn">
						<a class="c-btn btn-bg-gray m-r" href="javascript:;">取消</a>
						<a class="c-btn btn-bg-blue" href="javascript:;">确定</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 全局js -->
		<script src="../js/jquery.min.js?v=2.1.4"></script>
		<script src="../js/bootstrap.min.js?v=3.3.7"></script>
		<script src="../js/layui/layui.js"></script>

		<!-- 自定义js -->
		<script src="../js/content.js"></script>
	</body>
	<script type="text/javascript">
		$(function() {
			// 日期选择
			 layui.use('laydate', function(){
			   var laydate = layui.laydate;
			   
			   //执行一个laydate实例
			   laydate.render({
				 elem: '#date' //指定元素
			   });
			   
			   //执行一个laydate实例
			   laydate.render({
			   		elem: '#times', //指定元素
					type: 'time'
			   });
			 });
			$('#set_time').on('click', function() {
				$('#time').removeClass('c-hide')
			})
			$('#close_time').on('click', function() {
				$('#time').addClass('c-hide')
			})
			
			// 选择机构
			$('.input-select').on('click', function() {
				$(this).children('.select-ul').removeClass('c-hide')
				$(this).children('.check-select').removeClass('c-hide')
			})
			$('.select-ul li').on('click', function(e) {
				e.stopPropagation()
				$(this).addClass('curr').siblings().removeClass('curr')
				$(this).parent().parent().children('input').val($(this).text())
				$('.select-ul').addClass('c-hide')
			})
			$('.check-select li').on('click', function() {
				let input = $(this).parent().parent().children('input')
				let wordStar = input.val().indexOf($(this).text())
				let wordEnd = input.val().indexOf($(this).text()) + $(this).text().length
				if (input.val().indexOf($(this).text()) == 0) {
					wordEnd = wordEnd + 1
				} else {
					wordStar = wordStar - 1
				}
				let checkEle = $(this).parents('.check-select').children('li').children('.check')
				if ($(this).children('.all-sp').length) {
					if ($(this).children('.all-sp').hasClass('checked')) {
						checkEle.removeClass('checked')
						input.val('')
					} else {
						// 全选
						checkEle.addClass('checked')
						let str = []
						$(this).parents('.check-select').children('li').each(function(){
							str.push($(this).text());
							let text = ''
							for(var i = 1; i <= str.length -1; i++) {
								if (i == 1) {
									text = str[i]
								} else {
									text = text  + '、' + str[i]
								}
							}
							input.val(text)
						})
					}
				} else {
					if ($(this).children('.check').hasClass('checked')) {
						input.val(input.val().substring(0,wordStar) + input.val().substring(wordEnd))
						$(this).children('.check').removeClass('checked')
					} else {
						$(this).children('.check').addClass('checked')
						if (input.val() != '') {
							input.val(input.val() + '、' + $(this).text())
						} else {
							input.val($(this).text())
						}
					}
				}
				let allsp = $(this).parents('.check-select').children('li').children('.all-sp')
				if (allsp.hasClass('checked') && $(this).parents('.check-select').children('li').children('.checked').length == $(this).parents('.check-select').children('li').length) {
					allsp.addClass('checked')
				} else if(!allsp.hasClass('checked') && $(this).parents('.check-select').children('li').children('.checked').length == $(this).parents('.check-select').children('li').length - 1) {
					allsp.addClass('checked')
				} else {
					allsp.removeClass('checked')
				}
			})
			// 多选步骤
			$('.file-tit').on('click', function(e){
				e.stopPropagation()
				$(this).children('i').toggleClass('checked')
				$(this).parent().parent().toggleClass('border-blue')
			})
			$('.file-con a').on('click', function() {
				window.location.href = '查看质控内容.html'
			})
		})
	</script>
</html>
